<!DOCTYPE html>
<html lang="en-US" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
  <link rel="manifest" href="./manifest.json">
  <link rel="stylesheet" href="./converter.css">
  <title>Temperature converter</title>
  <style>
    .update-dialog {
      position: fixed;
      /* background-color: rgba(0, 0, 0, 0.5); */
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    .inner {
      background-color: #fff;
      padding: 20px;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }

    .footer button {
      display: inline-block;
      background-color: #108ee9;
      color: #fff;
      border: none;
      outline: none;
      padding: 4px 6px;
      margin: 0 10px;
    }
  </style>
</head>

<body>
  <form id="converter">
    <label for="input-temp">temperature2</label>
    <input type="text" id="input-temp" name="input-temp" value="20" />
    <label for="input-unit">from</label>
    <select id="input-unit" name="input-unit">
      <option value="c" selected>Celsius</option>
      <option value="f">Fahrenheit</option>
      <option value="k">Kelvin</option>
    </select>
    <label for="output-unit">to</label>
    <select id="output-unit" name="output-unit">
      <option value="c">Celsius</option>
      <option value="f" selected>Fahrenheit</option>
      <option value="k">Kelvin</option>
    </select>
    <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
    <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
  </form>

  <script src="./converter.js"></script>
  <script>
    register()
    async function register() {
      if ("serviceWorker" in navigator) {
        try {
          const registration = await navigator.serviceWorker.register("/sw.js", {
            scope: "/",
          });
          if (registration.installing) {
            // 首次安装,此时一定没有sw,会拉取最新的
            console.log("正在安装 Service worker");
          } else if (registration.waiting) {
            // 已存在被安装的新版本
            console.log("已安装 Service worker ");
            notifyNewVersion()
            // console.log(registration.waiting)
          } else if (registration.active) {
            // 激活当前本地的最后一个版本(占用全部关闭)
            console.log("激活 Service worker");

          }

          // 首次、更新安装下载时触发
          registration.addEventListener('updatefound', (e) => {
            console.log('updatefound')
            const newWorker = registration.installing
            newWorker.addEventListener('statechange', () => {
              if (newWorker.state === 'installed') {
                console.log(registration.installing)
                console.log(registration.waiting)
                console.log(registration.active)

                if (registration.waiting) {
                  if (registration.active) {
                    console.log('发现新版本')
                    // registration.waiting.postMessage({ type: 'skipWaiting' })
                    notifyNewVersion()
                  } else {
                    console.log('首次安装')
                  }
                }
              }
            })
          })

        } catch (error) {
          console.error(`注册失败：${error}`);
        }
      }

      navigator.serviceWorker.addEventListener('controllerchange', () => {
        window.location.reload(); // 刷新页面
      });
    }

    const notifyNewVersion = () => {
      updateDialog()
    }

    var updateDialog = () => {
      const d = document.createElement('div')
      d.className = "update-dialog"
      d.innerHTML = `
        <div class="inner">
          <div class="message">发现新版本,是否立即更新</div>
          <div class="footer">
            <button class="ok">确定</button>
            <button class="cancel">取消</button>
          </div>
        </div>
      `
      d.addEventListener('click', e => {
        if (e.target.className === 'ok') {
          navigator.serviceWorker.ready.then((registration) => {
            registration.waiting.postMessage({ type: 'skipWaiting' });
          });
          document.body.removeChild(d)
        }
        if (e.target.className === 'cancel') {
          document.body.removeChild(d)
        }
      })

      document.body.appendChild(d)
    }

  </script>
</body>

</html>